<template>
  <div class="conference-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>会议管理</span>
          <el-button type="primary" @click="handleCreate">创建会议</el-button>
        </div>
      </template>

      <!-- 搜索和筛选表单 -->
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="会议标题">
          <el-input v-model="searchForm.title" placeholder="请输入会议标题" clearable />
        </el-form-item>
        <el-form-item label="会议地点">
          <el-input v-model="searchForm.location" placeholder="请输入会议地点" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable class="status-select">
            <el-option 
              v-for="(label, value) in statusOptions" 
              :key="value" 
              :label="label.text" 
              :value="value"
            >
              <div class="status-option">
                <el-tag :type="label.type" effect="plain" size="small">
                  {{ label.text }}
                </el-tag>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="filteredConferences" style="width: 100%">
        <el-table-column prop="title" label="会议标题" align="center" />
        <el-table-column prop="location" label="会议地点" align="center" />
        <el-table-column prop="startTime" label="开始时间" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.startTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="500" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <!-- 编辑按钮 -->
              <el-button 
                size="small" 
                type="info" 
                plain
                class="action-btn edit-btn"
                @click="handleEdit(scope.row)">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>

              <!-- 状态更改下拉菜单 -->
              <el-dropdown 
                trigger="click"
                @command="(command) => handleStatusChange(scope.row, command)"
              >
                <el-button 
                  size="small" 
                  type="warning" 
                  plain
                  class="action-btn status-btn">
                  <el-icon><Setting /></el-icon>
                  状态
                  <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item 
                      :command="1"
                      :disabled="scope.row.status === 1"
                    >
                      <el-icon><Check /></el-icon>
                      设为已发布
                    </el-dropdown-item>
                    <el-dropdown-item 
                      :command="2"
                      :disabled="scope.row.status === 2"
                    >
                      <el-icon><Timer /></el-icon>
                      设为已结束
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

              <!-- 详情按钮 -->
              <el-button 
                size="small" 
                type="primary" 
                plain
                class="action-btn detail-btn"
                @click="handleViewDetail(scope.row)">
                <el-icon><View /></el-icon>
                详情
              </el-button>
              
              <!-- 二维码按钮 -->
              <el-button 
                size="small" 
                type="success" 
                plain
                class="action-btn qr-btn"
                @click="handleViewQRCode(scope.row)">
                <el-icon><QrCode /></el-icon>
                二维码
              </el-button>
              
              <!-- 删除按钮 -->
              <el-button 
                size="small" 
                type="danger" 
                plain
                class="action-btn delete-btn"
                @click="handleDelete(scope.row)">
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 会议表单对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="50%"
    >
      <el-form :model="conferenceForm" label-width="100px">
        <el-form-item label="会议标题" required>
          <el-input v-model="conferenceForm.title" />
        </el-form-item>
        <el-form-item label="会议地点" required>
          <el-input v-model="conferenceForm.location" />
        </el-form-item>
        <el-form-item label="开始时间" required>
          <el-date-picker
            v-model="conferenceForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            @change="handleStartTimeChange"
          />
        </el-form-item>
        <el-form-item label="结束时间" required>
          <el-date-picker
            v-model="conferenceForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            @change="handleEndTimeChange"
          />
        </el-form-item>
        <el-form-item label="发布人" required>
          <el-input v-model="conferenceForm.conferencePublisher" placeholder="请输入发布人姓名" />
        </el-form-item>
        <el-form-item label="会议状态" required>
          <el-select v-model="conferenceForm.status" placeholder="请选择会议状态">
            <el-option label="未发布" :value="0">
              <span style="color: #909399">未发布</span>
            </el-option>
            <el-option label="已发布" :value="1">
              <span style="color: #67C23A">已发布</span>
            </el-option>
            <el-option label="已结束" :value="2">
              <span style="color: #E6A23C">已结束</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 会议通知对话框 -->
    <el-dialog
      title="会议通知"
      v-model="noticeDialogVisible"
      width="50%"
    >
      <div class="notice-content">
        <pre>{{ currentNotice }}</pre>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="noticeDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 二维码对话框 -->
    <el-dialog
      title="会议二维码"
      v-model="qrcodeDialogVisible"
      width="300px"
      center
    >
      <div class="qrcode-content">
        <img 
          v-if="currentQRCode"
          :src="currentQRCode"
          alt="会议二维码"
          class="qrcode-image"
        />
        <div v-else class="qrcode-loading">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>正在生成二维码...</span>
        </div>
        <div class="qrcode-tip">扫描二维码查看会议详情</div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="qrcodeDialogVisible = false">关闭</el-button>
          <el-button 
            type="primary" 
            @click="downloadQRCode"
          >
            下载二维码
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { 
  Edit, 
  View, 
  QrCode, 
  Delete, 
  Setting, 
  ArrowDown,
  Check,
  Timer,
  Loading
} from '@element-plus/icons-vue'
import request from "@/utils/request";

export default {
  name: 'ConferenceList',
  components: {
    Edit,
    View,
    QrCode,
    Delete,
    Setting,
    ArrowDown,
    Check,
    Timer,
    Loading
  },
  setup() {
    const router = useRouter()
    const conferences = ref([])
    const filteredConferences = ref([])
    const dialogVisible = ref(false)
    const dialogTitle = ref('')
    const noticeDialogVisible = ref(false)
    const qrcodeDialogVisible = ref(false)
    const currentNotice = ref('')
    const currentQRCode = ref('')
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)

    const searchForm = ref({
      title: '',
      location: '',
      status: '',
      dateRange: []
    })

    const conferenceForm = ref({
      id: null,
      title: '',
      location: '',
      startTime: '',
      endTime: '',
      conferencePublisher: '',
      status: 0,
      organizerId: 1 // 默认值，实际应该根据登录用户设置
    })

    // 状态选项配置
    const statusOptions = {
      '0': { text: '未发布', type: 'info' },
      '1': { text: '已发布', type: 'success' },
      '2': { text: '已结束', type: 'warning' }
    }

    const fetchConferences = async () => {
      try {
        console.log('开始获取会议列表...')
        const params = {
          page: currentPage.value,
          size: pageSize.value,
          title: searchForm.value.title || undefined,
          location: searchForm.value.location || undefined,
          status: searchForm.value.status || undefined,
          startDate: searchForm.value.dateRange?.[0] || undefined,
          endDate: searchForm.value.dateRange?.[1] || undefined
        }
        console.log('请求参数:', params)
        
        const response = await request('/api/conferences', { method: 'get', params })
        console.log('接口返回数据:', response.data)
        
        // 确保正确处理响应数据
        const data = response.data || response
        conferences.value = data.content || []
        total.value = data.totalElements || 0
        filteredConferences.value = conferences.value
        
        // 获取数据后检查状态
        checkAndUpdateConferenceStatus()
      } catch (error) {
        console.error('获取会议列表失败:', error)
        ElMessage.error('获取会议列表失败: ' + (error.response?.data?.message || error.message))
      }
    }

    const handleSearch = () => {
      currentPage.value = 1  // 搜索时重置到第一页
      fetchConferences()
    }

    const resetSearch = () => {
      searchForm.value = {
        title: '',
        location: '',
        status: '',
        dateRange: []
      }
      handleSearch()
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      currentPage.value = 1  // 重置到第一页
      fetchConferences()
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
      fetchConferences()
    }

    const handleCreate = () => {
      dialogTitle.value = '创建会议'
      conferenceForm.value = {
        id: null,
        title: '',
        location: '',
        startTime: '',
        endTime: '',
        conferencePublisher: '',
        status: 0,
        organizerId: 1 // 默认值，实际应该根据登录用户设置
      }
      dialogVisible.value = true
    }

    const handleEdit = (row) => {
      dialogTitle.value = '编辑会议'
      conferenceForm.value = { 
        ...row,
        startTime: row.startTime ? new Date(row.startTime) : '',
        endTime: row.endTime ? new Date(row.endTime) : '',
        conferencePublisher: row.conferencePublisher || '',
        organizerId: row.organizerId || 1
      }
      dialogVisible.value = true
    }

    const validateTime = () => {
      if (!conferenceForm.value.startTime || !conferenceForm.value.endTime) {
        return false;
      }
      
      const startTime = new Date(conferenceForm.value.startTime).getTime();
      const endTime = new Date(conferenceForm.value.endTime).getTime();
      const minDuration = 15 * 60 * 1000; // 15分钟的毫秒数
      
      return endTime - startTime >= minDuration;
    }

    const handleSubmit = async () => {
      try {
        // 表单验证
        if (!conferenceForm.value.title?.trim()) {
          ElMessage.error('请输入会议标题')
          return
        }
        if (!conferenceForm.value.location?.trim()) {
          ElMessage.error('请输入会议地点')
          return
        }
        if (!validateTime()) {
          ElMessage.error('结束时间必须至少晚于开始时间15分钟')
          return
        }
        if (!conferenceForm.value.conferencePublisher?.trim()) {
          ElMessage.error('请输入发布人姓名')
          return
        }

        // 准备提交的数据
        const conferenceData = {
          ...conferenceForm.value,
          title: conferenceForm.value.title.trim(),
          location: conferenceForm.value.location.trim(),
          conferencePublisher: conferenceForm.value.conferencePublisher.trim(),
          startTime: conferenceForm.value.startTime,
          endTime: conferenceForm.value.endTime
        }

        if (conferenceForm.value.id) {
          // 更新会议
          await request({
            url: `/api/conferences/${conferenceForm.value.id}`,
            method: 'put',
            data: conferenceData
          })
          ElMessage.success('会议信息更新成功')
        } else {
          // 创建会议
          await request({
            url: '/api/conferences',
            method: 'post',
            data: conferenceData
          })
          ElMessage.success('会议创建成功')
        }
        
        dialogVisible.value = false
        fetchConferences()
      } catch (error) {
        console.error('操作失败:', error)
        ElMessage.error('操作失败: ' + (error.response?.data?.message || error.message))
      }
    }

    // 监听开始时间变化
    const handleStartTimeChange = (value) => {
      if (value && conferenceForm.value.endTime) {
        if (!validateTime()) {
          ElMessage.warning('请注意：结束时间必须至少晚于开始时间15分钟');
        }
      }
    }

    // 监听结束时间变化
    const handleEndTimeChange = (value) => {
      if (value && conferenceForm.value.startTime) {
        if (!validateTime()) {
          ElMessage.warning('请注意：结束时间必须至少晚于开始时间15分钟');
        }
      }
    }

    const handleDelete = (row) => {
      ElMessageBox.confirm('确定要删除该会议吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await request({
            url: `/api/conferences/${row.id}`,
            method: 'delete'
          })
          ElMessage.success('删除成功')
          fetchConferences()
        } catch (error) {
          ElMessage.error('删除失败: ' + (error.response?.data?.message || error.message))
        }
      })
    }

    const handleViewNotice = async (row) => {
      try {
        const response = await request({
          url: `/api/conferences/${row.id}/notice`,
          method: 'get'
        })
        currentNotice.value = response.data
        noticeDialogVisible.value = true
      } catch (error) {
        ElMessage.error('获取会议通知失败: ' + (error.response?.data?.message || error.message))
      }
    }

    const handleViewQRCode = async (row) => {
      try {
        qrcodeDialogVisible.value = true
        currentQRCode.value = ''
        
        console.log('正在获取会议ID:', row.id, '的二维码')
        const response = await request(`/api/conferences/${row.id}/qrcode`, { methods: 'get' })
        console.log('二维码响应:', response)
        
        if (response) {
          currentQRCode.value = response
        } else {
          throw new Error('二维码数据为空')
        }
      } catch (error) {
        console.error('获取二维码失败:', error)
        ElMessage.error('获取二维码失败：' + (error.response?.data || error.message))
      }
    }

    // 查看详情
    const handleViewDetail = (row) => {
      router.push({ name: 'ConferenceDetail', params: { id: row.id } })
    }

    const formatDateTime = (dateTime) => {
      return new Date(dateTime).toLocaleString()
    }

    const getStatusText = (status) => {
      return statusOptions[status]?.text || '未知'
    }

    const getStatusType = (status) => {
      return statusOptions[status]?.type || 'info'
    }

    const handleStatusChange = async (row, newStatus) => {
      try {
        await request({
          url: `/api/conferences/${row.id}`,
          method: 'put',
          data: {
            ...row,
            status: newStatus
          }
        })
        ElMessage.success('状态更新成功')
        fetchConferences()
      } catch (error) {
        ElMessage.error('状态更新失败: ' + (error.response?.data?.message || error.message))
        console.error('Error updating status:', error)
      }
    }

    // 检查并更新过期会议的状态
    const checkAndUpdateConferenceStatus = async () => {
      try {
        const now = new Date().getTime()
        const expiredConferences = conferences.value.filter(conf => 
          conf.status === 1 && // 已发布状态
          new Date(conf.endTime).getTime() < now // 已过结束时间
        )

        // 批量更新过期的会议状态
        for (const conf of expiredConferences) {
          await request({
            url: `/api/conferences/${conf.id}`,
            method: 'put',
            data: {
              ...conf,
              status: 2 // 更新为已结束状态
            }
          })
        }

        // 如果有会议状态被更新，则刷新会议列表
        if (expiredConferences.length > 0) {
          ElMessage.info(`${expiredConferences.length}个已发布的会议已自动更新为已结束状态`)
          fetchConferences()
        }
      } catch (error) {
        console.error('自动更新会议状态失败:', error)
      }
    }

    // 组件挂载时启动定时检查
    onMounted(() => {
      console.log('组件已挂载，准备获取数据...')
      fetchConferences()
      
      // 立即检查一次
      checkAndUpdateConferenceStatus()
    })

    return {
      conferences,
      filteredConferences,
      dialogVisible,
      dialogTitle,
      noticeDialogVisible,
      qrcodeDialogVisible,
      currentNotice,
      currentQRCode,
      currentPage,
      pageSize,
      total,
      searchForm,
      conferenceForm,
      handleSearch,
      resetSearch,
      handleSizeChange,
      handleCurrentChange,
      handleCreate,
      handleEdit,
      handleSubmit,
      handleDelete,
      handleViewNotice,
      handleViewQRCode,
      handleViewDetail,
      formatDateTime,
      getStatusText,
      getStatusType,
      statusOptions,
      handleStatusChange,
      checkAndUpdateConferenceStatus,
      handleStartTimeChange,
      handleEndTimeChange
    }
  }
}
</script>

<style scoped>
.conference-list {
  padding: 90px 32px 32px;  /* 增加顶部内边距，避免导航栏遮挡 */
  background: linear-gradient(to bottom, #f0f2f5, #ffffff);
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.card-header span {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  background: linear-gradient(120deg, #1a6fff, #36cfc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.search-form {
  margin-bottom: 24px;
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 响应式布局调整 */
@media screen and (max-width: 768px) {
  .conference-list {
    padding: 80px 16px 16px;  /* 移动端减小内边距 */
  }

  .search-form {
    padding: 16px;
    margin-bottom: 16px;
  }

  .card-header span {
    font-size: 18px;
  }

  .conference-logo {
    width: 160px;
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  .conference-logo {
    width: 140px;
    height: auto;
  }
}

.notice-content {
  white-space: pre-wrap;
  font-family: monospace;
  background: #e3eafc;
  border-radius: 6px;
  padding: 10px;
}

.qrcode-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-bottom: 16px;
}

.qrcode-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #909399;
}

.qrcode-tip {
  color: #606266;
  font-size: 14px;
  margin-top: 8px;
}

/* 确保二维码清晰 */
.qrcode-image {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.06);
  overflow: hidden;
}

.el-button, button {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
  cursor: pointer;
}
.el-button:hover, button:hover {
  background: #1565c0;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.12);
}
.el-button:active, button:active {
  background: #0d47a1;
}

/* 操作按钮容器 */
.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 基础按钮样式 */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
  background: transparent !important; /* 确保背景透明 */
}

/* 编辑按钮 */
.edit-btn {
  color: #909399 !important;
  border: 1px solid #909399;
}
.edit-btn:hover {
  color: #606266 !important;
  border-color: #606266;
  background-color: rgba(144, 147, 153, 0.1) !important;
}

/* 详情按钮 */
.detail-btn {
  color: #409EFF !important;
  border: 1px solid #409EFF;
}
.detail-btn:hover {
  color: #79bbff !important;
  border-color: #79bbff;
  background-color: rgba(64, 158, 255, 0.1) !important;
}

/* 二维码按钮 */
.qr-btn {
  color: #67C23A !important;
  border: 1px solid #67C23A;
}
.qr-btn:hover {
  color: #85ce61 !important;
  border-color: #85ce61;
  background-color: rgba(103, 194, 58, 0.1) !important;
}

/* 删除按钮 */
.delete-btn {
  color: #F56C6C !important;
  border: 1px solid #F56C6C;
}
.delete-btn:hover {
  color: #f78989 !important;
  border-color: #f78989;
  background-color: rgba(245, 108, 108, 0.1) !important;
}

/* 按钮图标样式 */
.el-icon {
  font-size: 14px;
}

/* 按钮点击效果 */
.action-btn:active {
  transform: scale(0.98);
}

/* 确保表格内容垂直居中 */
.el-table td {
  padding: 8px 0;
}

/* 禁用状态样式 */
.action-btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 按钮内文字和图标的间距 */
.action-btn .el-icon + span {
  margin-left: 4px;
}

.el-select {
  width: 100%;
}

/* 状态选择器样式 */
.status-select {
  width: 120px;
}

.status-option {
  display: flex;
  align-items: center;
  padding: 2px 0;
}

/* 状态标签样式 */
.el-tag {
  width: 100%;
  text-align: center;
  border-radius: 12px;
}

/* 未发布状态 */
.el-tag--info {
  --el-tag-bg-color: rgba(144, 147, 153, 0.1);
  --el-tag-border-color: #909399;
  --el-tag-hover-color: #909399;
}

/* 已发布状态 */
.el-tag--success {
  --el-tag-bg-color: rgba(103, 194, 58, 0.1);
  --el-tag-border-color: #67C23A;
  --el-tag-hover-color: #67C23A;
}

/* 已结束状态 */
.el-tag--warning {
  --el-tag-bg-color: rgba(230, 162, 60, 0.1);
  --el-tag-border-color: #E6A23C;
  --el-tag-hover-color: #E6A23C;
}

/* 下拉选项悬浮效果 */
.el-select-dropdown__item:hover .status-option {
  background: transparent;
}

/* 选中状态的样式 */
.el-select-dropdown__item.selected .status-option {
  color: var(--el-color-primary);
}

/* 状态按钮样式 */
.status-btn {
  color: #E6A23C !important;
  border: 1px solid #E6A23C;
}

.status-btn:hover {
  color: #ebb563 !important;
  border-color: #ebb563;
  background-color: rgba(230, 162, 60, 0.1) !important;
}

/* 下拉菜单样式 */
:deep(.el-dropdown-menu) {
  padding: 4px 0;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 13px;
}

:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-dropdown-menu__item.is-disabled) {
  opacity: 0.6;
}

/* 下拉菜单图标样式 */
:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 4px;
}

/* 按钮组样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 确保图标垂直居中 */
.el-icon {
  vertical-align: middle;
}

/* 按钮内容间距 */
.action-btn :deep(.el-icon + span) {
  margin-left: 4px;
}

.conference-logo {
  width: 200px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  margin-right: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
  transition: transform 0.3s ease;
}

.conference-logo:hover {
  transform: scale(1.05);
}
</style> 